<template>
	<view class="conTent" :style="{'min-height':screenHeight}">
		<view class="ViewFlex">
			<!-- #ifdef MP-WEIXIN -->
			<navBar title="个人中心" :bgMake="1" :Bot="false" tabBar></navBar>
			<!-- #endif -->

			<view class="topBg" :style="{'padding-top':`${Pinia.totalHeight}px`}">
				<view class="viewbox auto d-flex a-center j-sb p-top20">
					<view class="d-flex a-center" v-if="!Pinia.vid" @click="toUrl(`/User/login`)">
						<view class="Header m-right24">
							<view class="iconfont icon-zhaoxiangji white size60"></view>
							<view class="upload_text flexac">
								<text class="h7 white headTxt">上传头像</text>
							</view>
						</view>
						<view class="d-flex f-column">
							<text class="size32 black bold">注册/登录</text>
							<text class="color_99 h6 m-top10">登录后即可体验更多服务</text>
						</view>
					</view>
					<view class="d-flex a-center" v-if="Pinia.vid">
						<view class="Header m-right24">
							<image :src="imgUrls(myJson.headimg)" mode="aspectFill" class="Userhead"></image>
							<view class="upload_text flexac" v-if="wedding.verify_msg">
								<text class="h7 white headTxt">{{wedding.verify_msg}}</text>
							</view>
						</view>
						<view class="d-flex f-column">
							<view class="d-flex a-center">
								<text class="size32 black bold">{{myJson.nickName}}</text>
								<text class="color_99 size26 m-left20"
									v-if="wedding.verify_msg">{{wedding.verify_msg}}</text>
							</view>
							<view class="d-flex a-center m-top6" @click.stop="Utils.setClip(myJson.sn_id)">
								<text class="black size28">ID:{{myJson.sn_id}}</text>
								<view class="iconfont icon-fuzhiwenjian color_cc size28 p-left10"></view>
							</view>
						</view>
					</view>
					<view class="Edit" v-if="Pinia.vid  && wedding.step > 1" @click="toUrl(`/User/Edit`)">编辑资料</view>

				</view>

				<view class="viewbox auto d-flex a-center j-sb m-top10 m-bot10">

					<view class="d-flex f-column a-center padding20" @click="toPage(`/User/follow`,1)">
						<text class="black size32 bold">{{wedding.follow_num}}</text>
						<text class="color_33 size26 m-top4">关注我的</text>
					</view>
					<view class="d-flex f-column a-center padding20" @click="toPage(`/User/follow`,2)">
						<text class="black size32 bold">{{wedding.to_follow_num}}</text>
						<text class="color_33 size26 m-top4">我的关注</text>
					</view>
					<view class="d-flex f-column a-center padding20" @click="toPage(`/User/look`,3)">
						<text class="black size32 bold">{{wedding.view_num}}</text>
						<text class="color_33 size26 m-top4">谁看过我</text>
					</view>
					<view class="d-flex f-column a-center padding20" @click="toPage(`/User/look`,4)">
						<text class="black size32 bold">{{wedding.to_view_num}}</text>
						<text class="color_33 size26 m-top4">我看了谁</text>
					</view>
				</view>
			</view>

			<view class="viewbox auto VipInfo d-flex a-center">
				<view class="flex-1 d-flex f-column j-sa height">
					<text class="white size34">{{isVip_text}}</text>
					<text class="color_d5 size26">{{MemberTxt}}</text>
				</view>
				<view class="contact flexac" @click="ChildContact.Contact = true">
					<view class="contact_Box flexac size26 bold color_33 t-letter2">联系红娘</view>
				</view>
			</view>

			<view class="viewbox auto m-top50">
				<view class="Options" @click="ChildContact.Contact = true">
					<view class="d-flex a-center">
						<image :src="staticImg('kefu2_1.png')" class="OptionIcon"></image>
						<text class="color_33 size32">专属红娘</text>
					</view>
					<view class="iconfont icon-a-zujian7 h6 color_cc"></view>
				</view>
				<view class="Options" @click="toPage(`/User/Money`)">
					<view class="d-flex a-center">
						<image :src="staticImg('develop_1.png')" class="OptionIcon"></image>
						<text class="color_33 size32">推广达人</text>
					</view>
					<view class="iconfont icon-a-zujian7 h6 color_cc"></view>
				</view>
				<view class="Options" @click="toUrl(`/User/introduce?id=32729`)">
					<view class="d-flex a-center">
						<image :src="staticImg('agreement_1.png')" class="OptionIcon"></image>
						<text class="color_33 size32 ">用户协议</text>
					</view>
					<view class="iconfont icon-a-zujian7 h6 color_cc"></view>
				</view>
				<view class="Options" @click="toUrl(`/User/introduce?id=32730`)">
					<view class="d-flex a-center">
						<image :src="staticImg('state_1.png')" class="OptionIcon"></image>
						<text class="color_33 size32 ">温馨提示</text>
					</view>
					<view class="iconfont icon-a-zujian7 h6 color_cc"></view>
				</view>
				<view class="Options" @click="toUrl(`/User/introduce?id=32731`)">
					<view class="d-flex a-center">
						<image :src="staticImg('setting_1.png')" class="OptionIcon"></image>
						<text class="color_33 size32 ">隐私协议</text>
					</view>
					<view class="iconfont icon-a-zujian7 h6 color_cc"></view>
				</view>
			</view>



		</view>
		<connection></connection>
		<Load v-if="!wedding"></Load>
		<Contact ref="ChildContact"></Contact>

	</view>
</template>

<script setup>
	import { ref, inject, computed } from 'vue';
	import { onShow, onShareAppMessage } from '@dcloudio/uni-app';
	import { usePiniaStore } from '@/store/pinia.js';
	import Http from '@/common/request.js';
	import Utils from '@/common/utils.js';

	const Pinia = usePiniaStore();
	const { Toast, modelY, pageHome, toUrl, imgUrls, staticImg } = inject('Utils');
	const ChildContact = ref(null);
	const addData = ref(true);
	const content = ref('完善全部资料即可获得脱单机会');
	const myJson = ref('');
	const wedding = ref('');

	onShow(() => {
		myInfo();
	})

	const myInfo = () => {
		Http.post({
			url: '/SRA_userIntegral/myInfo',
			data: {
				VeriCode: Pinia.bid,
				vId: Pinia.vid
			}
		}).then(res => {
			const result = res.data;
			myJson.value = result.myJson;
			wedding.value = result.wedding;
			if (!Pinia.vid || result.wedding.step >= 5) return;
			modelY('提示', content.value, '完善资料').then(Res => {
				if (!Res) return pageHome();
				switch (wedding.value.step) {
					case 1:
						toUrl(`/User/basics`);
						break;
					case 2:
						toUrl(`/User/editAvatar`);
						break;
					case 3:
						toUrl(`/User/depthData?procedure=1`);
						break;
					case 4:
						toUrl(`/User/depthData?procedure=2`);
						break;
					case 5:
						toUrl(`/User/depthData?procedure=3`);
						break;
				}
			})

		})
	}

	const toPage = (url, num) => {
		if (!Pinia.vid) return toUrl(`/User/login`);
		toUrl(`${url}?type=${num}`)
	}



	const isVip_text = computed(() => {
		if (!Pinia.vid) return `欢迎来到${Pinia.title}`;
		return wedding.value.is_vip == 1 ? `有效期至 ${wedding.value.expire_at}` : '尚未开通会员'
	})

	const MemberTxt = computed(() => {
		if (!Pinia.vid) return `更多会员权益等你解锁`;
		return '会员权益：享受红娘牵线服务'
	})

	const screenHeight = computed(() => {
		// #ifdef H5
		return Pinia.System.screenHeight - 50 + 'px'
		// #endif
		// #ifdef MP-WEIXIN
		return `100vh`
		// #endif
	})
	onShareAppMessage(() => {
		let share = Pinia.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/startUp/startUp?share_v_id=${Pinia.vid}`,
			imageUrl: share.imageUrl
		}
	})
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.conTent {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.ViewFlex {
		flex: 1;
		overflow-y: scroll;
	}

	.topBg {
		width: 100%;

		background-image: linear-gradient(to top, $pageBg 0%, #f4e5e8 50%, #f2d4da 100%);
	}

	.Header {
		width: 110rpx;
		height: 110rpx;
		background-color: #fae2e1;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		transform: translateY(0);
	}

	.Userhead {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.upload_text {
		width: 100%;
		height: 30rpx;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.headTxt {
		zoom: 0.7;
	}

	.icon-zhaoxiangji {
		text-align: center;
		margin-top: 18rpx;
	}

	.Edit {
		width: 180rpx;
		height: 60rpx;
		color: #ffffff;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		background-color: $themeColor;
		// background-image: linear-gradient(to right,#fac7c3 0%, var(--color) 100%);
	}

	.VipInfo {
		height: 160rpx;
		padding: 20rpx 30rpx;
		background-image: url('http://sraimgcdn2.mogoie.com/Uploads/xiangqing/userbg.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom;
		border-radius: 20rpx;
	}

	.contact {
		width: 110rpx;
		height: 110rpx;
		background-color: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
	}

	.contact_Box {
		width: 98rpx;
		height: 98rpx;
		padding: 0 18rpx;
		text-align: center;
		background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
		border-radius: 50%;
	}

	.Options {
		width: 100%;
		height: 90rpx;
		margin: 20rpx auto 0 auto;
		background-color: #ffffff;
		padding: 0 20rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.OptionIcon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.dome {
		width: 100%;
		height: 300rpx;
		position: relative;
	}
</style>